<template>
  <div class="content-box">
    <template v-if="hasCorner">
      <div class="content-box__corner content-box__corner--top-left" />
      <div class="content-box__corner content-box__corner--top-right" />
      <div class="content-box__corner content-box__corner--bottom-left" />
      <div class="content-box__corner content-box__corner--bottom-right" />
    </template>
    <slot></slot>
  </div>
</template>

<script>
/**
 * ## ContentBox
 * 用来实现边框和阴影效果的盒子组件
 */
export default {
  name: 'ContentBox',
  props: {
    // 是否有四个角
    hasCorner: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style lang="scss">
.content-box {
  position: relative;
  box-sizing: border-box;
  border: $base * 2px solid $bg_b;
  background: $bg;
  pointer-events: initial;
  .content-box__corner {
    width: $base * 20px;
    height: $base * 20px;
    background: transparent;
    border: $base * 2px solid $bg_b_in;
    position: absolute;

    &.content-box__corner--top-left {
      border-right: none;
      border-bottom: none;
      left: $base * -2px;
      top: $base * -2px;
      border-color: $bg_b_angle;
    }

    &.content-box__corner--top-right {
      border-left: none;
      border-bottom: none;
      right: $base * -2px;
      top: $base * -2px;
      border-color: $bg_b_angle;
    }

    &.content-box__corner--bottom-left {
      border-right: none;
      border-top: none;
      left: $base * -2px;
      bottom: $base * -2px;
      border-color: $bg_b_angle;
    }

    &.content-box__corner--bottom-right {
      border-left: none;
      border-top: none;
      right: $base * -2px;
      bottom: $base * -2px;
      border-color: $bg_b_angle;
    }
  }
}
</style>